<template>
  <m-calender
    :events="events"
    @dateClick="dateClick"
    @eventClick="eventClick"
    displayEventEnd
    :eventContent="eventContent"
  ></m-calender>
</template>

<script lang="ts" setup>
import { EventClickArg, EventContentArg } from "@fullcalendar/common";
import { DateClickArg } from "@fullcalendar/interaction";
import { EventItem } from "../../components/calender/src/types";
import { ref } from "vue";
let events = ref<EventItem[]>([
  {
    title: "购物",
    start: "2022-11-11 12:00",
    end: "2022-11-12 00:00",
    editable: true,
  },
  {
    title: "玩游戏",
    start: "2022-11-22 00:00",
    end: "2022-11-22 01:00",
  },
]);
let eventContent = (arg: EventContentArg) => {
  let el = document.createElement("div");
  let timeTextArr = arg.timeText.split("-");
  let start = timeTextArr[0];
  let end = timeTextArr[1];
  el.innerHTML = `
        <div>开始时间：${start}</div>
        <div>结束时间：${end}</div>
        <div>标题：${arg.event._def.title}</div>
        `;
  return {
    domNodes: [el],
  };
};
// 点击日历上的每一天
const dateClick = (info: DateClickArg) => {
  console.log(info, 1);
  events.value.push({
    title: "学习",
    start: info.dateStr,
    end: info.dateStr,
  });
};

const eventClick = (info: EventClickArg) => {
  console.log(info, 2);
};
</script>
<style lang="scss" scoped></style>
